<template>
    <div>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="方案名称：">
                <el-input v-model="formInline.planName" placeholder></el-input>
            </el-form-item>
            <el-form-item label="促销方式：">
                <el-select v-model="formInline.promotionType">
                    <el-option label="全部" value></el-option>
                    <el-option label="现金" value="1"></el-option>
                    <el-option label="满减" value="2"></el-option>
                    <el-option label="满折" value="3"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="是否发布：">
                <el-select v-model="formInline.status">
                    <el-option label="全部" value></el-option>
                    <el-option label="已发布" value="1"></el-option>
                    <el-option label="未发布" value="0"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="search()" size="mini">查询</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="toAdd()" icon="el-icon-edit" size="mini">创建方案</el-button>
            </el-form-item>
        </el-form>

        <el-table
            :data="tableData"
            v-loading="loading"
            border
            style="width: 100%;"
            height="500"
            :header-cell-style="{background:'#ebecf0',color:'#606266'}"
        >
            <el-table-column type="index" width="60" label="序号" align="center" ></el-table-column>
            <el-table-column prop="planName" label="方案名称" header-align="center" width="220"></el-table-column>
            <el-table-column prop="promotionType" label="促销方式" header-align="center" width="100">
                <template slot-scope="scope">
                    <span v-if="scope.row.promotionType == '1'">现金</span>
                    <span v-if="scope.row.promotionType == '2'">满减</span>
                    <span v-if="scope.row.promotionType == '3'">满折</span>
                </template>
            </el-table-column>
            <el-table-column
                prop="couponCount"
                label="卡券种类数"
                header-align="center"
                align="right"
                width="100"
            ></el-table-column>
            <el-table-column
                prop="couponSumQuantity"
                label="投放总份数"
                header-align="center"
                align="right"
                width="100"
            ></el-table-column>
            <el-table-column
                prop="couponQuantity"
                label="剩余份数"
                header-align="center"
                align="right"
                width="100"
            ></el-table-column>
            <el-table-column prop="beginTime" label="开始时间" header-align="center" width="100">
                <template slot-scope="scope">{{scope.row.beginTime.substring(0,10)}}</template>
            </el-table-column>
            <el-table-column prop="endTime" label="截止时间" header-align="center" width="100">
                <template slot-scope="scope">{{scope.row.endTime.substring(0,10)}}</template>
            </el-table-column>
            <el-table-column label="方案状态" align="center" width="100">
                <template slot-scope="scope">
                    <span v-if="scope.row.status == '1'">已发布</span>
                    <span v-if="scope.row.status == '0'">未发布</span>
                    <span v-if="scope.row.status == '2'">已删除</span>
                </template>
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间" align="center" width="180"></el-table-column>
            <el-table-column
                label="操作"
                width="180"
                align="center"
                header-align="center"
                fixed="right"
            >
                <template slot-scope="scope">
                    <el-button
                        type="text"
                        @click="updatePlanStatus(scope.row.uuid, '1')"
                        v-if="scope.row.status == '0'"
                    >发布</el-button>
                    <el-button
                        type="text"
                        @click="updatePlanStatus(scope.row.uuid, '0')"
                        v-if="scope.row.status == '1'"
                    >撤回</el-button>
                    <el-button
                        type="text"
                        @click="toEdit(scope.row)"
                        v-if="scope.row.status == '0'"
                    >编辑</el-button>
                    <el-button
                        type="text"
                        @click="updatePlanStatus(scope.row.uuid, '2')"
                        v-if="scope.row.status == '0'"
                    >删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <div class="block" style="margin-top:5px;">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :page-sizes="[10, 20, 30, 50, 100]"
                :current-page="listQuery.current"
                :page-size="listQuery.size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
            ></el-pagination>
        </div>
    </div>
</template>

<script>
import {
  queryPromotionList,
  updatePlanStatus,
  deletePromotion
} from "@/api/promotionProgramEdit";

export default {
  data() {
    return {
      logininfo: {},
      orgList: [],
      orgSeq: "",
      loading: true,
      formInline: {
        planName: "",
        promotionType: "",
        status: ""
      },
      total: 0,
      userId: "",
      listQuery: {
        current: 1,
        size: 10
      },
      tableData: []
    };
  },
  mounted() {
    this.logininfo = localStorage.getItem("logininfo");
    this.orgList = JSON.parse(this.logininfo).orgList;
    this.orgSeq = this.orgList[0].orgSeq;
    this.promotionList();
  },
  methods: {
    handleSizeChange(val) {
      this.listQuery.size = val;
      this.promotionList();
    },
    handleCurrentChange(val) {
      this.listQuery.current = val;
      this.promotionList();
    },
    indexMethod(index) {
      let curpage = this.listQuery.current; //单前页码，具体看组件取值
      let limitpage = this.listQuery.size; //每页条数，具体是组件取值
      return index + 1 + (curpage - 1) * limitpage;
    },
    search() {
      this.listQuery.current = 1;
      this.promotionList();
    },
    promotionList() {
      let data = {
        size: this.listQuery.size,
        current: this.listQuery.current,
        condition: {
          orgSeq: this.orgSeq,
          planName: this.formInline.planName,
          promotionType: this.formInline.promotionType,
          status: this.formInline.status
        },
        ascs: [],
        descs: []
      };
      queryPromotionList(data).then(res => {
        this.loading = false;
        console.log(res.records);
        this.tableData = res.records;
        this.total = res.total;
      });
    },
    toAdd() {
      this.$router.push({
        name: "promotionEdit",
        params: {}
      });
    },
    toEdit(item) {
      this.$router.push({
        name: "promotionEdit",
        params: {
          edit: item
        }
      });
    },
    updatePlanStatus(planId, status) {
      var msg = "";
      if (status == "1") {
        msg = "发布";
      } else if (status == "0") {
        msg = "撤回";
      } else if (status == "2") {
        msg = "删除";
      }
      this.$confirm("确定" + msg + "当前方案吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          updatePlanStatus(planId, status, "").then(res => {
            if (res.code == "1") {
              this.$message({
                showClose: true,
                message: msg + "成功",
                type: "success"
              });
              this.promotionList();
            } else {
              this.$message.error(msg + "失败");
            }
            this.loading = false;
          });
        })
        .catch(() => {});
    }
  },
  beforeRouteLeave(to, from, next) {
    // 设置下一个路由的 meta
    to.meta.keepAlive = false; // C 跳转到 A 时让 A 不缓存，即刷新
    next();
  }
};
</script>
<style lang="less" scoped>
.toptitle {
    border: 1px solid #e0e0e0;
    border-bottom: 2px solid #188097;
    background: #f5f5f5;
    line-height: 35px;
    margin-bottom: 10px;
    padding: 0 10px;
    font-size: 14px;
    font-weight: bold;
}
.el-input--small .el-input__inner {
    height: 32px;
    line-height: 32px;
}
.demo-form-inline {
    //   border: 1px solid #ebeef5;
    padding: 20px 10px 0px 30px;
}
</style>